<template>
  <div class="wft-page-generate">
    <ToolBar :containerConfig="containerConfig" />
    <Container>
      <template #comp>
        <Comp />
      </template>
      <template #panel>
        <Panel :data="data" @onActivated="onActivated" @containerConfig="getContainerConfig" @save="panelJson => $emit('save', panelJson)" />
      </template>
      <template #config>
        <Config :curComp="curComp" :containerConfig="containerConfig" />
      </template>
    </Container>
  </div>
</template>
<script>
import { ToolBar, Container, Comp, Panel, Config } from './Layout'
import '../lib/animate/index.css'
import '../static/icon/iconfont.css'
export default {
  data() {
    return {
      curComp: {},
      containerConfig: {}
    }
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  components: { ToolBar, Container, Comp, Panel, Config },
  methods: {
    onActivated(curComp) {
      this.curComp = curComp
    },
    getContainerConfig(containerConfig) {
      this.containerConfig = containerConfig
    }
  }
}
</script>
<style scoped>
.wft-page-generate { 
  width: 100%;
  height: 100%;
}
</style>
